<template>
  <div class="forgetpassword">
    <i class="el-icon-arrow-left" @click="returnlogin">登录</i>
    <h3>忘记密码 ？</h3>
    <div class="loginOrlogupOrforgetbox">
      <!-- 用户名 -->
      <el-input
        placeholder="请输入用户名"
        v-model="forgetpassword.username"
        clearable
        class="input"
        oninput="value=value.replace(/[^\da-zA-Z]/g,'')"
        maxLength="8"
      >
      </el-input>
      <!-- 手机号 -->
      <el-input
        placeholder="请输入手机号"
        v-model="forgetpassword.phone"
        clearable
        class="input"
      >
      </el-input>
      <!-- 短信验证码 -->
      <p class="code">
        <el-input
          placeholder="请输入验证码"
          v-model="forgetpassword.code"
          clearable
          class="input"
        >
        </el-input>
        <el-button plain :disabled="flag" class="codebtn" @click="codebtncli">{{
          word
        }}</el-button>
      </p>
      <!-- 密码 -->
      <el-input
        placeholder="请输入密码"
        v-model="forgetpassword.password"
        show-password
        class="input"
        oninput="value=value.replace(/[^\da-z]/g,'')"
        maxLength="16"
      >
      </el-input>
      <!-- 确认密码 -->
      <el-input
        placeholder="再次输入"
        v-model="forgetpassword.bfpassword"
        show-password
        class="input"
        oninput="value=value.replace(/[^\da-z]/g,'')"
        maxLength="16"
      >
      </el-input>
      <p class="btns">
        <el-button :plain="true" @click="btn">完成</el-button>
      </p>
    </div>
  </div>
</template>


<script>
import "../../assets/css/loginOrlogupOrforget.less";

export default {
  data() {
    return {
      forgetpassword: {
        username: "", //用户名
        phone: "", //手机哈
        code: "", //验证码
        password: "", //密码
        bfpassword: "", //重复密码
      },
      word: "获取验证码", //验证码按
      flag: false,
    };
  },
  methods: {
    // 返回登录
    returnlogin() {
      this.$router.push({
        path: "/login",
      });
    },
    btn() {
      if (this.forgetpassword.username == "") {
        this.$message({
          message: "用户名不能为空",
          type: "warning",
          center: true,
        });
      } else if (this.forgetpassword.phone == "") {
        this.$message({
          message: "手机号码不能为空",
          type: "warning",
          center: true,
        });
      } else if (this.forgetpassword.code == "") {
        this.$message({
          message: "验证码不能为空",
          type: "warning",
          center: true,
        });
      } else if (this.forgetpassword.password == "") {
        this.$message({
          message: "密码不能为空",
          type: "warning",
          center: true,
        });
      } else if (this.forgetpassword.bfpassword == "") {
        this.$message({
          message: "确认密码不能为空",
          type: "warning",
          center: true,
        });
      } else if (
        this.forgetpassword.password != this.forgetpassword.bfpassword
      ) {
        this.$message({
          message: "用户名两次密码输入不一致不能为空",
          type: "warning",
          center: true,
        });
      } else {
        // console.log(666);
        this.$http
          .post("/api/user/restpaw", {
            u_name: this.forgetpassword.username,
            u_tele: this.forgetpassword.phone,
            params: this.forgetpassword.code,
            u_password: this.forgetpassword.password,
          })
          .then((res) => {
            // console.log(res);
            if (res.code == 403) {
              this.$message({
                message: '预留电话号码不正确'
              })
            }

            if (res.code == 200) {
              this.$message({
                message: "密码修改成功，正在跳转至登录页...",
              });
              this.$router.push({
                path: '/login'
              })
            }
          });
      }
    },
    codebtncli() {
      this.$http
        .post("/api/user/sendtele", {
          phone: this.forgetpassword.phone,
        })
        .then((res) => {
          if (res.code == 200) {
            this.$message({
              message: "验证码发送成功",
              center: true,
            });
          } else {
            this.$message.error({
              message: "验证码发送失败",
              center: true,
            });
          }
        });
      if (this.flag) {
        return false;
      }
      let that = this,
        time = 30;
      var sendTimer = setInterval(function () {
        that.flag = true;
        time--;
        that.word = "重新发送" + time;
        if (time < 0) {
          that.flag = false;
          clearInterval(sendTimer);
          that.word = "获取验证码";
        }
      }, 1000);
    },
  },
};
</script>


<style lang="less" scoped>
.el-icon-arrow-left {
  margin-top: 0.5rem;
}
</style>